<template>
  <main-box>
    <PlusSearch
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-xs"
      @search="initData()"
      @reset="initData()"
    />
    <div class="mb-2">
      <btnExport
        :queryform="queryform"
        :exportApi="exportApi"
        :downloadName="`报警记录_${route.query.warnDateStr}`"
      />
    </div>
    <PureTable
      ref="tableRef"
      border
      adaptive
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="initData()"
      @page-current-change="initData(false)"
    />

    <videoPlay ref="videoPlayRef" />
  </main-box>
</template>

<script setup lang="tsx">
import { onMounted, ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import { useRoute } from "vue-router";
import { recordApi, exportApi } from "@/api/statistics/warn";

import videoPlay from "./modules/videoPlay.vue";
import btnExport from "@/components/btnExport/index.vue";

const route = useRoute();
/* 查询表单 */
const formConfig: PlusColumn[] = [
  {
    label: "查询",
    prop: "searchValue",
    fieldProps: { placeholder: "物件名称/物件编号/标签编码" }
  }
];
const queryform = ref({ searchValue: "" });

/* 表格数据 */
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  {
    label: "物件图片",
    prop: "picUrl",
    cellRenderer: ({ row }) => {
      const { picUrl } = row;
      let list = [];
      if (picUrl) {
        list = picUrl.split(",");
      }
      return list.map((item, index) => {
        return (
          <el-image
            src={item}
            width={50}
            initial-index={index}
            preview-src-list={list}
            preview-teleported={true}
          />
        );
      });
    }
  },
  { label: "物件编号", prop: "code" },
  { label: "物件名称", prop: "name" },
  { label: "分类", prop: "toolCategoryName" },
  { label: "物件型号", prop: "modelName" },
  { label: "品牌", prop: "brandName" },
  { label: "标签编号", prop: "labelCode" },
  { label: "工具室", prop: "warehouseName" },
  { label: "存放位置", prop: "storageLocation" },
  { label: "报警时间", prop: "warnTime" },

  {
    label: "操作",
    prop: "action",
    cellRenderer: ({ row }) => (
      <>
        {row.warnUrl ? (
          <el-link
            type="primary"
            underline={false}
            onClick={() => showVideo(row)}
          >
            视频
          </el-link>
        ) : (
          <span class="text-gray-400">无视频</span>
        )}

        {row.warnPicUrl ? (
          <div class="relative" style="display: inline-block">
            <el-image
              src={row.warnPicUrl}
              preview-src-list={[row.warnPicUrl]}
              preview-teleported={true}
              class="absolute"
              style="width: 100%;height: 100%; top: 0;position: absolute!important;z-index:100; opacity: 0;"
            ></el-image>
            <el-link underline={false} type="primary" class="ml-2">
              图像
            </el-link>
          </div>
        ) : (
          ""
        )}
      </>
    )
  }
];
const initData = async (needInit = true) => {
  loading.value = false;
  if (needInit) {
    pagination.currentPage = 1;
  }
  const params = {
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize,
    warnDate: route.query.warnDateStr,
    warehouseId: route.query.warehouseId,
    searchValue: queryform.value.searchValue
  } as any;

  await recordApi(params).then(res => {
    tableData.value = res.rows;
    pagination.total = Number(res.total);
  });
  loading.value = false;
};

onMounted(() => {
  initData();
});

const videoPlayRef = ref(null);
const showVideo = row => {
  videoPlayRef.value.show(row);
};
</script>
